<template>
  <view class="order-details-page">
    <!-- 支付成功横幅 -->
    <view class="success-banner">
      <view class="banner-content">
        <text class="success-text">支付成功, 请您前往指定门店消费</text>
        <view class="store-info">
          <image src="@/img/车联网服务-04汽车保养-06确认订单_slices/商家@3x.png" class="store-icon"></image>
          <view class="store-details">
            <text class="store-name">{{orderData.storeInfo.name || '伟业汽车维修厂(人民路店)'}}</text>
            <text class="store-address">{{orderData.storeInfo.address || '山阳区人民中路32号'}}</text>
          </view>
        </view>
      </view>
      <image src="@/img/车联网服务-04汽车保养-06确认订单_slices/收起箭头小 拷贝@3x.png" class="nav-icon"></image>
    </view>

    <!-- 订单详情 -->
    <view class="order-details-section">
      <view class="section-header">
        <text class="section-title">订单详情</text>
      </view>
      
      <view class="service-items">
        <view class="service-item" v-for="(service, index) in orderData.services" :key="index">
          <text class="service-name">{{service.name}}</text>
          <text class="service-price">¥ {{service.price}}</text>
        </view>
        
        <!-- 如果没有服务数据，显示默认信息 -->
        <view v-if="!orderData.services || orderData.services.length === 0" class="no-services">
          <text class="no-data-text">暂无服务数据</text>
        </view>
      </view>
      
      <view class="pricing-breakdown">
        <view class="price-item">
          <text class="price-label">原价</text>
          <text class="price-value">¥ {{orderData.pricing.originalPrice || calculateOriginalPrice()}}</text>
        </view>
        <view class="price-item" v-if="orderData.pricing.discount && orderData.pricing.discount !== '0'">
          <text class="price-label">优惠</text>
          <text class="price-value discount">- ¥ {{orderData.pricing.discount}}</text>
        </view>
        <view class="divider" v-if="(orderData.pricing.discount && orderData.pricing.discount !== '0') || (orderData.pricing.coupon && orderData.pricing.coupon !== '0')"></view>
        <view class="price-item" v-if="orderData.pricing.coupon && orderData.pricing.coupon !== '0'">
          <text class="price-label">优惠券</text>
          <text class="price-value discount">- ¥ {{orderData.pricing.coupon}}</text>
        </view>
        <view class="price-item final">
          <text class="price-label">支付金额</text>
          <text class="price-value final-amount">¥ {{orderData.pricing.finalAmount || orderData.amount || '0.00'}}</text>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="section-header">
        <text class="section-title">订单信息</text>
      </view>
      
      <view class="info-items">
        <view class="info-item">
          <text class="info-label">订单号:</text>
          <text class="info-value">{{orderData.orderNumber || 'ORD' + Date.now()}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">下单时间:</text>
          <text class="info-value">{{orderData.orderInfo.orderTime || formatCurrentTime()}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">预约时间:</text>
          <text class="info-value">{{orderData.orderInfo.appointmentTime || '立即预约'}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">车辆:</text>
          <text class="info-value">{{orderData.orderInfo.vehicle || '未选择车辆'}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">备注:</text>
          <text class="info-value">{{orderData.orderInfo.notes || '无'}}</text>
        </view>
        <view class="info-item" v-if="orderData.userInfo && orderData.userInfo.name">
          <text class="info-label">联系人:</text>
          <text class="info-value">{{orderData.userInfo.name}}</text>
        </view>
        <view class="info-item" v-if="orderData.userInfo && orderData.userInfo.phone">
          <text class="info-label">联系电话:</text>
          <text class="info-value">{{orderData.userInfo.phone}}</text>
        </view>
        <view class="info-item" v-if="orderData.couponInfo">
          <text class="info-label">使用优惠券:</text>
          <text class="info-value">{{orderData.couponInfo.name}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderData: {
        orderNumber: '',
        amount: '',
        storeInfo: {
          name: '',
          address: ''
        },
        services: [],
        pricing: {
          originalPrice: '',
          discount: '',
          coupon: '',
          finalAmount: ''
        },
        orderInfo: {
          orderTime: '',
          appointmentTime: '',
          vehicle: '',
          notes: ''
        }
      }
    }
  },
  
  onLoad(options) {
    console.log('订单详情页面接收到的数据:', options);
    
    if (options.orderData) {
      try {
        this.orderData = JSON.parse(decodeURIComponent(options.orderData));
        console.log('解析后的订单数据:', this.orderData);
      } catch (error) {
        console.error('解析订单数据失败:', error);
        uni.showToast({
          title: '数据解析失败',
          icon: 'none'
        });
      }
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 格式化当前时间
    formatCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hour = String(now.getHours()).padStart(2, '0');
      const minute = String(now.getMinutes()).padStart(2, '0');
      return `${year}.${month}.${day}. ${hour}:${minute}`;
    },
    
    // 计算原价
    calculateOriginalPrice() {
      if (this.orderData.services && this.orderData.services.length > 0) {
        return this.orderData.services.reduce((sum, service) => {
          return sum + (parseInt(service.price) || 0);
        }, 0).toString();
      }
      return '0';
    }
  }
}
</script>

<style scoped>
.order-details-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 支付成功横幅 */
.success-banner {
  background-color: #007AFF;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.banner-content {
  flex: 1;
}

.success-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.store-info {
  display: flex;
  align-items: center;
}

.store-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}

.store-details {
  display: flex;
  flex-direction: column;
}

.store-name {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 5rpx;
}

.store-address {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 订单详情 */
.order-details-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.section-header {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.service-items {
  margin-bottom: 30rpx;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.service-item:last-child {
  border-bottom: none;
}

.service-name {
  font-size: 28rpx;
  color: #333;
}

.service-price {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.pricing-breakdown {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
}

.price-item.final {
  border-top: 1rpx solid #f0f0f0;
  margin-top: 15rpx;
  padding-top: 20rpx;
}

.price-label {
  font-size: 28rpx;
  color: #333;
}

.price-value {
  font-size: 28rpx;
  color: #333;
}

.price-value.discount {
  color: #ff6b35;
}

.price-value.final-amount {
  color: #4CAF50;
  font-weight: bold;
  font-size: 32rpx;
}

.divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 15rpx 0;
}

/* 订单信息 */
.order-info-section {
  background-color: #fff;
  padding: 30rpx;
}

.info-items {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #333;
}

.info-value {
  font-size: 28rpx;
  color: #666;
  text-align: right;
  flex: 1;
  margin-left: 20rpx;
}

/* 无数据状态 */
.no-services {
  padding: 40rpx 0;
  text-align: center;
}

.no-data-text {
  color: #999;
  font-size: 28rpx;
}
</style>
